<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统 - 首页</title>
    <link rel="stylesheet" href="assets/css/index_styles.css">
    <!-- 先加载Vue -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/auth.js"></script>
</head>
<body>
    <div id="app">
        <div class="header">
            <div class="container header-content">
                <div class="logo">管理系统</div>
                <ul class="top-menu">
                    <li><a href="index.html" class="active">首页</a></li>
                    <li class="dropdown">
                        <a href="#" @click.prevent="toggleDropdown">
                            业务中心 <span class="dropdown-icon">▼</span>
                        </a>
                        <div class="dropdown-menu" v-show="showDropdown">
                            <a v-for="center in businessCenters" :key="center.name"
                               :href="center.path">
                                {{ center.name }}
                            </a>
                        </div>
                    </li>
                </ul>
              <div class="user-info" v-if="currentDealer.name">
                欢迎，{{ currentDealer.name }}
                <el-button type="primary" size="mini" @click="exit(0)">登出</el-button>
              </div>
            </div>
        </div>

        <div class="container main-content">
            <div class="content" style="width: 100%;">
                <h1 class="page-title">八大中心</h1>

                <div class="center-grid">
                    <div class="center-item" v-for="center in centers" :key="center.id">
                        <div class="center-icon">
                            <i :class="center.icon"></i>
                        </div>
                        <h3>{{ center.name }}</h3>
                        <p>{{ center.description }}</p>
                        <a :href="center.link" class="btn">进入</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        checkAuthentication(0);
        // 直接初始化Vue实例
        new Vue({
            el: '#app',
            data: {
                currentDealer: JSON.parse(localStorage.getItem('currentDealer')) || {},
                dealerMenuList: JSON.parse(localStorage.getItem('dealerMenuList')) || [],
                username: '张三',
                showDropdown: false,
                businessCenters: [
                    { name: '订单中心', path: 'pages/index.html' },
                    { name: '用户中心', path: '#' },
                    { name: '产品中心', path: '#' },
                    { name: '库存中心', path: '#' },
                    { name: '财务中心', path: '#' },
                    { name: '数据中心', path: '#' },
                    { name: '系统中心', path: '#' },
                    { name: '消息中心', path: '#' }
                ],
                centers: [
                    {
                        id: 1,
                        name: '用户中心',
                        description: '管理用户信息、权限设置、账号安全等',
                        link: '#',
                        icon: 'user-icon'
                    },
                    {
                        id: 2,
                        name: '订单中心',
                        description: '管理订单信息、订单处理、订单跟踪等',
                        link: 'pages/index.html',
                        icon: 'order-icon'
                    },
                    {
                        id: 3,
                        name: '产品中心',
                        description: '管理产品信息、产品分类、产品规格等',
                        link: '#',
                        icon: 'product-icon'
                    },
                    {
                        id: 4,
                        name: '库存中心',
                        description: '管理库存信息、入库出库记录、库存预警等',
                        link: '#',
                        icon: 'inventory-icon'
                    },
                    {
                        id: 5,
                        name: '财务中心',
                        description: '管理财务信息、收支记录、财务报表等',
                        link: '#',
                        icon: 'finance-icon'
                    },
                    {
                        id: 6,
                        name: '数据中心',
                        description: '查看数据统计、数据分析、数据报表等',
                        link: '#',
                        icon: 'data-icon'
                    },
                    {
                        id: 7,
                        name: '系统中心',
                        description: '管理系统设置、系统参数、系统日志等',
                        link: '#',
                        icon: 'system-icon'
                    },
                    {
                        id: 8,
                        name: '消息中心',
                        description: '管理系统消息、通知公告、消息提醒等',
                        link: '#',
                        icon: 'message-icon'
                    }
                ]
            },
            methods: {
                exit,
                toggleDropdown() {
                    this.showDropdown = !this.showDropdown;
                }
            }
        });
    </script>

    <style>
        .center-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .center-item {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .center-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .center-icon {
            width: 60px;
            height: 60px;
            background-color: #e3f2fd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            color: #1e88e5;
            font-size: 24px;
        }

        /* 图标样式 */
        .user-icon:before { content: "👤"; }
        .order-icon:before { content: "📋"; }
        .product-icon:before { content: "📦"; }
        .inventory-icon:before { content: "🏭"; }
        .finance-icon:before { content: "💰"; }
        .data-icon:before { content: "📊"; }
        .system-icon:before { content: "⚙️"; }
        .message-icon:before { content: "📨"; }

        .center-item h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .center-item p {
            color: #666;
            margin-bottom: 15px;
            height: 40px;
        }

        .center-item .btn {
            display: inline-block;
        }
    </style>
</body>
</html>
